﻿<!DOCTYPE html>
<html>
  <head>
    <title>悬浮小工具 Side Widgets</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/______side_widgets/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/______side_widgets/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u11880" class="ax_default" data-label="背景">
        <div id="u11880_state0" class="panel_state" data-label="State1" style="">
          <div id="u11880_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u11881" class="ax_default" data-label="线条">
        <div id="u11881_state0" class="panel_state" data-label="State1" style="">
          <div id="u11881_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11882" class="ax_default _默认样式">
        <div id="u11882_div" class=""></div>
        <div id="u11882_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome Regular', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11883" class="ax_default _默认样式">
        <div id="u11883_div" class=""></div>
        <div id="u11883_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (操作类悬浮工具) -->

      <!-- 悬浮工具栏 (Dynamic Panel) -->
      <div id="u11885" class="ax_default" data-label="悬浮工具栏">
        <div id="u11885_state0" class="panel_state" data-label="State1" style="">
          <div id="u11885_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u11886" class="ax_default _默认样式">
              <div id="u11886_div" class=""></div>
              <div id="u11886_text" class="text ">
                <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">点赞</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11887" class="ax_default _默认样式">
              <div id="u11887_div" class=""></div>
              <div id="u11887_text" class="text ">
                <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">收藏</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11888" class="ax_default _默认样式">
              <div id="u11888_div" class=""></div>
              <div id="u11888_text" class="text ">
                <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">评论</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11889" class="ax_default _默认样式">
              <div id="u11889_div" class=""></div>
              <div id="u11889_text" class="text ">
                <p style="font-size:22px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">分享</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11890" class="ax_default _默认样式">
              <div id="u11890_div" class=""></div>
              <div id="u11890_text" class="text ">
                <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">QQ</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11891" class="ax_default _默认样式">
              <div id="u11891_div" class=""></div>
              <div id="u11891_text" class="text ">
                <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">微信</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11892" class="ax_default _默认样式">
              <div id="u11892_div" class=""></div>
              <div id="u11892_text" class="text ">
                <p style="font-size:18px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">微博</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (购物车悬浮工具) -->

      <!-- 悬浮工具栏 (Dynamic Panel) -->
      <div id="u11894" class="ax_default" data-label="悬浮工具栏">
        <div id="u11894_state0" class="panel_state" data-label="State1" style="">
          <div id="u11894_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u11895" class="ax_default _默认样式">
              <div id="u11895_div" class=""></div>
              <div id="u11895_text" class="text ">
                <p style="font-size:28px;line-height:28px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:14px;line-height:24px;"><span style="font-family:'微软雅黑';font-weight:400;">购</span></p><p style="font-size:14px;line-height:24px;"><span style="font-family:'微软雅黑';font-weight:400;">物</span></p><p style="font-size:14px;line-height:24px;"><span style="font-family:'微软雅黑';font-weight:400;">车</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11896" class="ax_default _默认样式">
              <div id="u11896_div" class=""></div>
              <div id="u11896_text" class="text ">
                <p><span>5</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u11898" class="ax_default _默认样式">
        <img id="u11898_img" class="img " src="images/___icons/u605.png"/>
        <div id="u11898_text" class="text ">
          <p><span>Copyright © </span><a id="u11899" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11900" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="130">

        <!-- Unnamed (Rectangle) -->
        <div id="u11901" class="ax_default _默认样式">
          <div id="u11901_div" class=""></div>
          <div id="u11901_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">悬浮小工具显示在页面左右两侧，为相关功能提供快速操作入口，本页提供了多种类型的悬浮小工具示例。演示示例中的相关工具使用母版进行了封装，复用起来非常方便，但需要对动态面板的功能有一定的掌握。使用时将工具栏母版复制到你的原型中，然后修改母版中动态面板里面的相关元素即可。工具栏的显示位置通过动态面板的“固定到浏览器”选项进行设置。返回顶部工具栏通过获取页面滚动函数和滚动事件条件判断控制返回按纽的显示或隐藏、通过锚点链接实现点击返回到页面顶部交互。</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11902" class="ax_default _默认样式">
          <div id="u11902_div" class=""></div>
          <div id="u11902_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11903" class="ax_default" data-left="20" data-top="250" data-width="1100" data-height="1200">

        <!-- Unnamed (Rectangle) -->
        <div id="u11904" class="ax_default _默认样式">
          <div id="u11904_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11905" class="ax_default _默认样式">
          <img id="u11905_img" class="img " src="images/______side_toolbar/u11675.png"/>
          <div id="u11905_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (带返回悬浮工具) -->

      <!-- 侧边工具 (Dynamic Panel) -->
      <div id="u11907" class="ax_default" data-label="侧边工具">
        <div id="u11907_state0" class="panel_state" data-label="State1" style="">
          <div id="u11907_state0_content" class="panel_state_content">

            <!-- Unnamed (Rectangle) -->
            <div id="u11908" class="ax_default _默认样式" title="意见反馈">
              <div id="u11908_div" class=""></div>
              <div id="u11908_text" class="text ">
                <p><span></span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11909" class="ax_default _默认样式" title="关注我们">
              <div id="u11909_div" class=""></div>
              <div id="u11909_text" class="text ">
                <p><span></span></p>
              </div>
            </div>

            <!-- TOP (Rectangle) -->
            <div id="u11910" class="ax_default _默认样式 ax_default_hidden" data-label="TOP" title="返回顶部" style="display:none; visibility: hidden">
              <div id="u11910_div" class=""></div>
              <div id="u11910_text" class="text ">
                <p style="font-size:28px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:14px;"><span style="font-family:'微软雅黑';font-weight:400;">TOP</span></p>
              </div>
            </div>

            <!-- 二维码 (Dynamic Panel) -->
            <div id="u11911" class="ax_default ax_default_hidden" data-label="二维码" style="display:none; visibility: hidden">
              <div id="u11911_state0" class="panel_state" data-label="State1" style="">
                <div id="u11911_state0_content" class="panel_state_content">

                  <!-- Unnamed (Speech Bubble) -->
                  <div id="u11912" class="ax_default _默认样式">
                    <img id="u11912_img" class="img " src="images/作品首页/u124.png"/>
                  </div>

                  <!-- Unnamed (Group) -->
                  <div id="u11913" class="ax_default" data-left="1" data-top="5" data-width="131" data-height="30">

                    <!-- Unnamed (Rectangle) -->
                    <div id="u11914" class="ax_default _默认样式">
                      <img id="u11914_img" class="img " src="images/作品首页/u126.png"/>
                      <div id="u11914_text" class="text ">
                        <p><span>仅作演示</span></p>
                      </div>
                    </div>
                  </div>

                  <!-- Unnamed (Group) -->
                  <div id="u11915" class="ax_default" data-left="16" data-top="29" data-width="100" data-height="100">

                    <!-- Unnamed (Rectangle) -->
                    <div id="u11916" class="ax_default box_2">
                      <div id="u11916_div" class=""></div>
                    </div>

                    <!-- Unnamed (Image) -->
                    <div id="u11917" class="ax_default image">
                      <img id="u11917_img" class="img " src="images/作品首页/u129.png"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 顶部热区 (Hot Spot) -->
      <div id="u11918" class="ax_default" data-label="顶部热区">
      </div>
    </div>
  </body>
</html>
